<template>
  <div>
    <div class="content">
      <div class="top">
        <el-form inline :model="form">
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              v-model="form.startTime"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择结束时间"
              v-model="form.endTime"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="统计时间类型">
            <el-select v-model="form.timeType" size="mini">
              <el-option label="每10分钟" value="10"></el-option>
              <el-option label="每1小时" value="1"></el-option>
              <el-option label="每24小时" value="24"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <p class="data" v-show="show">暂无数据</p>
      <div id="SinglePointAnalysis" v-show="shows" style="height: 78vh"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import axios from "axios";
import { getInmvDataList } from "../../../../api/Monitoring";
import { time } from "highcharts/highcharts";

export default {
  name: "SinglePointAnalysis",
  props: {
    source: {
      type: Object,
      default() {
        return {};
      },
    },
    node: Object,
  },
  data() {
    return {
      form: {
        startTime: moment().subtract(31, "d").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().add(1, "days").format("YYYY-MM-DD HH:mm:ss"),
        timeType: "1",
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      shows: true,
      dataArr: [],
      show: false,
      legendName: [],
      xDataArr: [],
      list: [],
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.shows = true;
      this.show = false;
      var myChart = echarts.init(
        document.getElementById("SinglePointAnalysis")
      );
      myChart.showLoading();
      const res = await getInmvDataList({
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
        endTime: this.form.endTime,
        startTime: this.form.startTime,
        timeType: this.form.timeType,
        // monitorType: this.node.monitorTypeId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.shows = true;
        this.show = false;
        let lists = [];
        let list = res.parameter.list;
        let DepthList = res.parameter.tunnelDepthList,
          data = [],
          data2 = [],
          data3 = [],
          data4 = [],
          items = [],
          timeArr = [];
        let passageway1 = "";
        let passageway2 = "";
        let passageway3 = "";
        let passageway4 = "";
        let passageway5 = "";
        if (list[0].dataList[0]) {
          passageway1 = "01通道";
        } else {
          passageway1 = 1;
        }
        if (list[0].dataList[1]) {
          passageway2 = "02通道";
        } else {
          passageway2 = 2;
        }
        if (list[0].dataList[2]) {
          passageway3 = "03通道";
        } else {
          passageway3 = 3;
        }
        if (list[0].dataList[3]) {
          passageway4 = "04通道";
        } else {
          passageway4 = 4;
        }
        if (list[0].dataList[4]) {
          passageway5 = "05通道";
        } else {
          passageway5 = 5;
        }
        // console.log(timeArr);
        // console.log(DepthList);
        // console.log(list);
        // for (var i = 0; i < list.length - 1; i++) {
        //   if (list[i].dataList.length !== DepthList.length) {
        //     list.splice(i, i);
        //     i--;
        //   }
        // }
        for (let i = 0; i < list.length; i++) {
          for (let j = 0; j < list[i].dataList.length; j++) {
            let obj = {
              tunnel: "",
              value: "",
              theDate: "",
            };
            obj.value = list[i].dataList[j].xdata;
            obj.tunnel = list[i].dataList[j].tunnel;
            obj.theDate = list[i].dataList[j].theDate;
            lists.push(obj);
            if (lists[i].tunnel == "01") {
              items.push(lists[i].value.toFixed(3));
            }
            if (lists[i].tunnel == "02") {
              data.push(lists[i].value.toFixed(3));
            }
            if (lists[i].tunnel == "03") {
              data2.push(lists[i].value.toFixed(3));
            }
            if (lists[i].tunnel == "04") {
              data3.push(lists[i].value.toFixed(3));
            }
            if (lists[i].tunnel == "05") {
              data4.push(lists[i].value.toFixed(3));
            }
          }
        }
        for (let i = 0; i < list.length; i++) {
          timeArr.push(list[i].theDate);
        }
        let option = {
          title: {
            left: "center",
            text:
              this.node.label +
              "测点" +
              this.form.startTime +
              "至" +
              this.form.endTime +
              "监测点变形分析",
          },
          tooltip: {
            trigger: "axis",
            formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  " mm<br/>";
              }
              return tip;
            },
          },
          color: ["#5599FF", "#FF0000", "#FFCC22", "#66DD00", "#CC00CC"],
          legend: {
            itemHeight: 2,
            // itemWidth: 25,
            data: [
              {
                name: passageway1,
                icon: "ract",
              },
              {
                name: passageway2,
                icon: "ract",
              },
              {
                name: passageway3,
                icon: "ract",
              },
              {
                name: passageway4,
                icon: "ract",
              },
              {
                name: passageway5,
                icon: "ract",
              },
            ],

            top: 30,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
            // right: "3.7%",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: timeArr,
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
          },
          yAxis: {
            name: "位移(mm)",
            type: "value",
          },
          series: [
            {
              name: "01通道",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                type: "solid",
              },
              data: items,
            },
            {
              name: "02通道",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                type: "solid",
              },
              data: data,
            },
            {
              name: "03通道",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                type: "solid",
              },
              data: data2,
            },
            {
              name: "04通道",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                type: "solid",
              },
              data: data3,
            },
            {
              name: "05通道",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                type: "solid",
              },
              data: data4,
            },
          ],
          grid: {
            y2: 80,
          },
        };
        myChart.hideLoading();
        myChart.setOption(option);
      } else {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow: auto;
}
.top {
  height: 5vh;
  margin-top: 5px;
  margin-left: 10px;
}
.data {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
</style>
